<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />


    <link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/jquery-multi-select/css/multi-select.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/global/plugins/doublebox/css/doublebox-bootstrap.css"/>

    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
</head>
<body>
<div class="portlet light process1">
    <div class="portlet-body">
        <div class="mt-element-step">
            <div class="row step-line">
                <div class="col-md-2 col-xs-2 col-xs-offset-1 mt-step-col first active">
                    <div class="mt-step-number bg-white font-grey">1</div>
                    <div class="mt-step-title uppercase font-grey-cascade">选择输入源</div>
                </div>
                <div class="col-md-2 col-xs-2  mt-step-col">
                    <div class="mt-step-number bg-white font-grey">2</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输入配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col">
                    <div class="mt-step-number bg-white font-grey">3</div>
                    <div class="mt-step-title uppercase font-grey-cascade">转换配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col">
                    <div class="mt-step-number bg-white font-grey">4</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输出配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col last">
                    <div class="mt-step-number bg-white font-grey">5</div>
                    <div class="mt-step-title uppercase font-grey-cascade">同步策略</div>
                </div>
            </div>
        </div>
        <div class="from_control clearfix">
            <div class="from_control_l">
                <div class="select_drop_box">
                    <span class="label_on_fl">来源数据源：</span>
                    <div class="select_drop fl">
                        <select id="small--" class="form-control select2">
                            <optgroup label="Alaskan">
                                <option value="AK">Alaska</option>
                                <option value="HI" disabled="disabled">Hawaii</option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </optgroup>
                            <optgroup label="Mountain Time Zone">
                                <option value="AZ">Arizona</option>
                                <option value="CO">Colorado</option>
                                <option value="ID">Idaho</option>
                                <option value="MT">Montana</option>
                                <option value="NE">Nebraska</option>
                                <option value="NM">New Mexico</option>
                                <option value="ND">North Dakota</option>
                                <option value="UT">Utah</option>
                                <option value="WY">Wyoming</option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">Alabama</option>
                                <option value="AR">Arkansas</option>
                                <option value="IL">Illinois</option>
                                <option value="IA">Iowa</option>
                                <option value="KS">Kansas</option>
                                <option value="KY">Kentucky</option>
                                <option value="LA">Louisiana</option>
                                <option value="MN">Minnesota</option>
                                <option value="MS">Mississippi</option>
                                <option value="MO">Missouri</option>
                                <option value="OK">Oklahoma</option>
                                <option value="SD">South Dakota</option>
                                <option value="TX">Texas</option>
                                <option value="TN">Tennessee</option>
                                <option value="WI">Wisconsin</option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">Connecticut</option>
                                <option value="DE">Delaware</option>
                                <option value="FL">Florida</option>
                                <option value="GA">Georgia</option>
                                <option value="IN">Indiana</option>
                                <option value="ME">Maine</option>
                                <option value="MD">Maryland</option>
                                <option value="MA">Massachusetts</option>
                                <option value="MI">Michigan</option>
                                <option value="NH">New Hampshire</option>
                                <option value="NJ">New Jersey</option>
                                <option value="NY">New York</option>
                                <option value="NC">North Carolina</option>
                                <option value="OH">Ohio</option>
                                <option value="PA">Pennsylvania</option>
                                <option value="RI">Rhode Island</option>
                                <option value="SC">South Carolina</option>
                                <option value="VT">Vermont</option>
                                <option value="VA">Virginia</option>
                                <option value="WV">West Virginia</option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="mt-checkbox-box">
                    <label class="mt-checkbox mt-checkbox-outline"> 过滤已抽取对象
                        <input type="checkbox" value="1" name="test" checked="checked"/>
                        <span></span>
                    </label>
                </div>
            </div>
            <div class="from_control_r">
                <div class="demoTable">
                    <div class="layui-inline data_search fl">
                        <input name="id" id="demoReload" autocomplete="off">
                    </div>
                    <button class="btn layui-btn blue-hoki fl" data-type="reload">搜索</button>
                </div>
            </div>
        </div>
        <table class="layui-table" id="LAY_table_user" lay-filter="user"></table>
        <div class="process_foot ">
            <button class="btn blue-hoki process1_next">下一步</button>
            <button class="btn default margin-left-20 close_layui_page">取消</button>
        </div>
    </div>
</div>
<div style="display: none;" class="portlet light process2">
    <div class="portlet-body">
        <div class="mt-element-step">
            <div class="row step-line">
                <div class="col-md-2 col-xs-2 col-xs-offset-1 mt-step-col first">
                    <div class="mt-step-number bg-white font-grey">1</div>
                    <div class="mt-step-title uppercase font-grey-cascade">选择输入源</div>
                </div>
                <div class="col-md-2 col-xs-2  mt-step-col active">
                    <div class="mt-step-number bg-white font-grey">2</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输入配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col">
                    <div class="mt-step-number bg-white font-grey">3</div>
                    <div class="mt-step-title uppercase font-grey-cascade">转换配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col">
                    <div class="mt-step-number bg-white font-grey">4</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输出配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col last">
                    <div class="mt-step-number bg-white font-grey">5</div>
                    <div class="mt-step-title uppercase font-grey-cascade">同步策略</div>
                </div>
            </div>
        </div>
        <div class="form-body">
            <div class="form-group margin-bottom-20 clearfix">
                <div class="row">
                    <div class="col-xs-6">
                        <div>源数据对象名：<span class="object_name">数据对象名(表名)</span></div>
                    </div>
                    <div class="col-xs-6">
                        <div>源数据源：<span class="data_name">xxx数据源</span></div>
                    </div>
                </div>
            </div>
            <div class="form-group clearfix" >
                <span class="control-label label_on_fl">过滤SQL</span>
                <textarea class="col-md-11 col-xs-11" placeholder="不需要输入where" style="height: 100px; padding: 10px 15px; resize: vertical;max-height:200px;min-height: 50px;"></textarea>
            </div>
            <div class="form-group clearfix">
                <!-- <span class=" control-label label_on_fl">并发数：</span>
                 <div class="col-md-4 col-xs-4">
                     <input id="touchspin_3" type="text" class="col-md-4" name="demo_vertical" value="1">
                 </div>-->
                <div class="col-xs-6">
                    <span class="label_on_fl margin-right-20 fl">字符型字段批量操作</span>
                    <div class="mt-checkbox-box fl margin-right-20">
                        <label class="mt-checkbox mt-checkbox-outline "> 去左右空格
                            <input type="checkbox" value="1" name="test" />
                            <span></span>
                        </label>
                    </div>
                    <div class="mt-checkbox-box fl">
                        <label class="mt-checkbox mt-checkbox-outline"> 去特殊字符
                            <input type="checkbox" value="1" name="test" />
                            <span></span>
                        </label>
                    </div>
                </div>

            </div>
            <div class="form-group clearfix">
                <span class="control-label label_on_fl">筛选字段：</span>
                <div class="mt-checkbox-box col-md-1 col-xs-1">
                    <label class="mt-checkbox mt-checkbox-outline">
                        <input type="checkbox" value="1" name="test" class="select_field"/>
                        <span></span>
                    </label>
                </div>
            </div>
            <div class="form-group clearfix">
                <div style="display: none;" class=" data_exchange col-xs-9">
                    <select multiple="multiple" size="10" name="doublebox" class="demo"></select>
                </div>
            </div>
            <div class="form-group">
                <span class="control-label label_on_fl">跳过转换配置</span>
                <div class="mt-checkbox-box col-md-1 col-xs-1">
                    <label class="mt-checkbox mt-checkbox-outline">
                        <input type="checkbox" value="1" name="test" checked="checked" class="skip_three"/>
                        <span></span>
                    </label>
                </div>
            </div>
        </div>
        <div class="process_foot">
            <button class="btn blue-hoki process2_prev">上一步</button>
            <button class="btn blue-hoki margin-left-20 process2_next">下一步</button>
            <button class="btn default margin-left-20 close_layui_page">取消</button>
        </div>
    </div>
</div>
<div style="display: none;" class="portlet light process3">
    <div class="portlet-body">
        <div class="mt-element-step">
            <div class="row step-line">
                <div class="col-md-2 col-xs-2 col-xs-offset-1 mt-step-col first">
                    <div class="mt-step-number bg-white font-grey">1</div>
                    <div class="mt-step-title uppercase font-grey-cascade">选择输入源</div>
                </div>
                <div class="col-md-2 col-xs-2  mt-step-col">
                    <div class="mt-step-number bg-white font-grey">2</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输入配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col active">
                    <div class="mt-step-number bg-white font-grey">3</div>
                    <div class="mt-step-title uppercase font-grey-cascade">转换配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col">
                    <div class="mt-step-number bg-white font-grey">4</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输出配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col last">
                    <div class="mt-step-number bg-white font-grey">5</div>
                    <div class="mt-step-title uppercase font-grey-cascade">同步策略</div>
                </div>
            </div>
        </div>
        <div class="from_control clearfix">
            <div class="from_control_l">
                <span class="label_on_max margin-right-20">转换</span>
            </div>
            <div class="from_control_r">
                <div class="btn-group">
                    <a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">添加
                        <span class="fa fa-angle-down"> </span>
                    </a>
                    <ul class="dropdown-menu pull-right">
                        <li>
                            <a href="javascript:;" class="process_tb_copy"> 单字段简单转换

                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="process_tb_map"> 计算转换

                            </a>
                        </li>
                        <li >
                            <a href="javascript:;"> 脚本转换

                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <table class="layui-table" id="LAY_table_user2" lay-filter="test"></table>
        <div class="process_foot">
            <button class="btn blue-hoki process3_prev">上一步</button>
            <button class="btn blue-hoki margin-left-20 process3_next">下一步</button>
            <button class="btn default margin-left-20 close_layui_page">取消</button>
        </div>
    </div>
</div>
<div style="display: none;" class="portlet light process4">
    <div class="portlet-body">
        <div class="mt-element-step">
            <div class="row step-line">
                <div class="col-md-2 col-xs-2 col-xs-offset-1 mt-step-col first">
                    <div class="mt-step-number bg-white font-grey">1</div>
                    <div class="mt-step-title uppercase font-grey-cascade">选择输入源</div>
                </div>
                <div class="col-md-2 col-xs-2  mt-step-col">
                    <div class="mt-step-number bg-white font-grey">2</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输入配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col">
                    <div class="mt-step-number bg-white font-grey">3</div>
                    <div class="mt-step-title uppercase font-grey-cascade">转换配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col active">
                    <div class="mt-step-number bg-white font-grey">4</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输出配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col last">
                    <div class="mt-step-number bg-white font-grey">5</div>
                    <div class="mt-step-title uppercase font-grey-cascade">同步策略</div>
                </div>
            </div>
        </div>

        <div class="from_control clearfix margin-bottom-20">
            <div class="row">
                <div class="select_drop_box col-md-6 col-xs-6">
                    <div class="row">
                        <span class="label_on_fl">来源数据源：</span>
                        <div class="select_drop fl col-md-10 col-xs-6">
                            <select id="select2-single-input-sm" class="form-control select2">
                                <optgroup label="Alaskan">
                                    <option value="AK">Alaska</option>
                                    <option value="HI" disabled="disabled">Hawaii</option>
                                </optgroup>
                                <optgroup label="Pacific Time Zone">
                                    <option value="CA">California</option>
                                    <option value="NV">Nevada</option>
                                    <option value="OR">Oregon</option>
                                    <option value="WA">Washington</option>
                                </optgroup>
                                <optgroup label="Mountain Time Zone">
                                    <option value="AZ">Arizona</option>
                                    <option value="CO">Colorado</option>
                                    <option value="ID">Idaho</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="UT">Utah</option>
                                    <option value="WY">Wyoming</option>
                                </optgroup>
                                <optgroup label="Central Time Zone">
                                    <option value="AL">Alabama</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TX">Texas</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="WI">Wisconsin</option>
                                </optgroup>
                                <optgroup label="Eastern Time Zone">
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="IN">Indiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="OH">Ohio</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WV">West Virginia</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>

                </div>
                <div class="select_drop_box col-md-6 col-xs-6">
                    <div class="row">
                        <div class="select_drop fr col-md-10 col-xs-6">
                            <select id="small-span" class="form-control select2">
                                <optgroup label="Alaskan">
                                    <option value="AK">Alaska</option>
                                    <option value="HI" disabled="disabled">Hawaii</option>
                                </optgroup>
                                <optgroup label="Pacific Time Zone">
                                    <option value="CA">California</option>
                                    <option value="NV">Nevada</option>
                                    <option value="OR">Oregon</option>
                                    <option value="WA">Washington</option>
                                </optgroup>
                                <optgroup label="Mountain Time Zone">
                                    <option value="AZ">Arizona</option>
                                    <option value="CO">Colorado</option>
                                    <option value="ID">Idaho</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="UT">Utah</option>
                                    <option value="WY">Wyoming</option>
                                </optgroup>
                                <optgroup label="Central Time Zone">
                                    <option value="AL">Alabama</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TX">Texas</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="WI">Wisconsin</option>
                                </optgroup>
                                <optgroup label="Eastern Time Zone">
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="IN">Indiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="OH">Ohio</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WV">West Virginia</option>
                                </optgroup>
                            </select>
                        </div>
                        <span class="label_on_max fr">来源数据对象：</span>
                    </div>


                </div>
            </div>
        </div>
        <div class="margin-bottom-10 clearfix">
            <h6 class="fl">输入字段映射</h6>
            <div class="fr">
                <a href="javascript:;" class="addToTable"><i class="glyphicon glyphicon-plus-sign" style="color: #8EC680;"></i> 编辑</a>
                <!--<a href="javascript:;"><i class="glyphicon glyphicon-minus-sign" style="color: #F18673;"></i> 删除</a>-->
            </div>
        </div>
        <div class="margin-top-10">
            <table class="layui-table" id="LAY_table_user3" lay-filter="user"></table>
        </div>
        <div class="process_foot">
            <button class="btn blue-hoki process4_prev">上一步</button>
            <button class="btn blue-hoki margin-left-20 process4_next">下一步</button>
            <button class="btn default margin-left-20 close_layui_page">取消</button>
        </div>
    </div>
</div>
<div style="display: none;" class="portlet light process5">
    <div class="portlet-body">
        <div class="mt-element-step">
            <div class="row step-line">
                <div class="col-md-2 col-xs-2 col-xs-offset-1 mt-step-col first">
                    <div class="mt-step-number bg-white font-grey">1</div>
                    <div class="mt-step-title uppercase font-grey-cascade">选择输入源</div>
                </div>
                <div class="col-md-2 col-xs-2  mt-step-col">
                    <div class="mt-step-number bg-white font-grey">2</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输入配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col">
                    <div class="mt-step-number bg-white font-grey">3</div>
                    <div class="mt-step-title uppercase font-grey-cascade">转换配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col">
                    <div class="mt-step-number bg-white font-grey">4</div>
                    <div class="mt-step-title uppercase font-grey-cascade">输出配置</div>
                </div>
                <div class="col-md-2 col-xs-2 mt-step-col last active">
                    <div class="mt-step-number bg-white font-grey">5</div>
                    <div class="mt-step-title uppercase font-grey-cascade">同步策略</div>
                </div>
            </div>
        </div>
        <div class="form-body">
            <div class="form-group clearfix">
                <h3 class="fl margin-right-10">流程名称</h3>
                <input type="text" class="input-sm col-xs-10"/>
            </div>
            <div class="form-group clearfix">
                <div class="row">
                    <div class="col-xs-6">
                        <span class="control-label col-xs-3 col-md-2 label_on_max">数据抽取方式:</span>
                        <div class="col-xs-8 toggle_form_show">
                            <select class="bs-select form-control">
                                <option>全量</option>
                                <option>时间戳增量</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <span class="control-label col-xs-3 col-xs-offset-1 col-md-2 col-md-offset-2 label_on_max">增量比较符:</span>
                        <div class="col-xs-7">
                            <select class="bs-select form-control">
                                <option> >=</option>
                                <option> ></option>
                            </select>
                        </div>
                        <a class="fa fa-h-square data_help_btn col-xs-1" data-toggle="tooltip" data-placement="left" title="帮助" style="font-size: 20px;line-height: 30px;text-align:center;color: #0094ff;"></a>
                        <p class="data_help display_none">>适用于抽取数据时，源表不会发生写操作场景,否则为确保不会遗漏数据请选择>=</p>
                    </div>
                </div>
            </div>
            <div class="form-group clearfix">
                <div class="row">
                    <div class="col-xs-6">
                    <span class="label_on_max col-xs-3 col-md-2">增量字段</span>
                    <div class="col-xs-8">
                        <select id="select2-multiple-" class="form-control input-lg select2-multiple" multiple>
                            <optgroup label="Alaskan">
                                <option value="AK">Alaska</option>
                                <option value="HI" disabled="disabled">Hawaii</option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </optgroup>
                            <optgroup label="Mountain Time Zone">
                                <option value="AZ">Arizona</option>
                                <option value="CO">Colorado</option>
                                <option value="ID">Idaho</option>
                                <option value="MT">Montana</option>
                                <option value="NE">Nebraska</option>
                                <option value="NM">New Mexico</option>
                                <option value="ND">North Dakota</option>
                                <option value="UT">Utah</option>
                                <option value="WY">Wyoming</option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">Alabama</option>
                                <option value="AR">Arkansas</option>
                                <option value="IL">Illinois</option>
                                <option value="IA">Iowa</option>
                                <option value="KS">Kansas</option>
                                <option value="KY">Kentucky</option>
                                <option value="LA">Louisiana</option>
                                <option value="MN">Minnesota</option>
                                <option value="MS">Mississippi</option>
                                <option value="MO">Missouri</option>
                                <option value="OK">Oklahoma</option>
                                <option value="SD">South Dakota</option>
                                <option value="TX">Texas</option>
                                <option value="TN">Tennessee</option>
                                <option value="WI">Wisconsin</option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">Connecticut</option>
                                <option value="DE">Delaware</option>
                                <option value="FL">Florida</option>
                                <option value="GA">Georgia</option>
                                <option value="IN">Indiana</option>
                                <option value="ME">Maine</option>
                                <option value="MD">Maryland</option>
                                <option value="MA">Massachusetts</option>
                                <option value="MI">Michigan</option>
                                <option value="NH">New Hampshire</option>
                                <option value="NJ">New Jersey</option>
                                <option value="NY">New York</option>
                                <option value="NC">North Carolina</option>
                                <option value="OH">Ohio</option>
                                <option value="PA">Pennsylvania</option>
                                <option value="RI">Rhode Island</option>
                                <option value="SC">South Carolina</option>
                                <option value="VT">Vermont</option>
                                <option value="VA">Virginia</option>
                                <option value="WV">West Virginia</option>
                            </optgroup>
                        </select>
                    </div>
                    </div>
                </div>
            </div>
            <div class="form-group clearfix">
                <div class="row">
                    <div class="col-xs-6">
                        <span class="control-label col-xs-3 col-md-2 label_on_max">输出方式:</span>
                        <div class="col-xs-8">
                            <select class="bs-select form-control">
                                <option>插入更新</option>
                                <option>直接插入</option>
                                <option>清空后插入</option>
                                <option>紧更新</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <span class="label_on_max col-xs-3 col-md-offset-2 col-md-2 col-xs-offset-1">更新比对字段</span>
                        <div class="col-xs-8">
                            <select id="select2-multiple" class="form-control input-lg select2-multiple" multiple>
                                <optgroup label="Alaskan">
                                    <option value="AK">Alaska</option>
                                    <option value="HI" disabled="disabled">Hawaii</option>
                                </optgroup>
                                <optgroup label="Pacific Time Zone">
                                    <option value="CA">California</option>
                                    <option value="NV">Nevada</option>
                                    <option value="OR">Oregon</option>
                                    <option value="WA">Washington</option>
                                </optgroup>
                                <optgroup label="Mountain Time Zone">
                                    <option value="AZ">Arizona</option>
                                    <option value="CO">Colorado</option>
                                    <option value="ID">Idaho</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="UT">Utah</option>
                                    <option value="WY">Wyoming</option>
                                </optgroup>
                                <optgroup label="Central Time Zone">
                                    <option value="AL">Alabama</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TX">Texas</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="WI">Wisconsin</option>
                                </optgroup>
                                <optgroup label="Eastern Time Zone">
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="IN">Indiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="OH">Ohio</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WV">West Virginia</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group clearfix data_syn_one display_none">
                <span class="label_on_max">第一次运行</span>
                <div class="form-group-box">
                    <!--<div class="form-group clearfix ">
                        <div class="row">
                            <div class="col-xs-6">
                                <span class="control-label label_on_max col-xs-3 col-md-2">数据同步方式:</span>
                                <div class="col-xs-8">
                                    <select class="bs-select form-control">
                                        <option>全量</option>
                                        <option>时间戳增量</option>
                                        <option>比对同步</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <span class="control-label label_on_max col-xs-3 col-md-2 col-xs-offset-1">输出方式:</span>
                                <div class="col-xs-8">
                                    <select class="bs-select form-control">
                                        <option>清空后插入</option>
                                        <option>插入更新</option>
                                        <option>直接插入</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>-->
                    <div class="row">
                        <div class="mt-radio-list radio_four col-xs-6">
                            <label class="mt-radio mt-radio-outline margin-bottom-30">
                                <input type="radio" name="optionsRadio" id="run_init" value="option3" checked> 抽取全量数据
                                <span></span>
                            </label>
                            <label class="mt-radio mt-radio-outline">
                                <input type="radio" name="optionsRadio" id="complete_init" value="option4">  抽取增量数据
                                <span></span>
                            </label>
                        </div>
                        <div class="col-xs-6">
                            <div class="run_init_box margin-bottom-20 clearfix"> <span class="control-label label_on_max col-xs-3 col-md-2">输出方式:</span>
                                <div class="col-xs-8">
                                    <select class="bs-select form-control">
                                        <option>清空后插入</option>
                                        <option>插入更新</option>
                                        <option>直接插入</option>
                                    </select>
                                </div></div>
                            <div class="complete_init_box clearfix" style="visibility: hidden">
                                <span class="label_on_max col-xs-4 col-md-2">时间戳起始值</span>
                                <div class="strat_time col-xs-8 col-md-10">
                                    <input type="text" class="input-sm col-xs-8"/>
                                    <button class="btn default col-xs-4 col-md-2">从数据库查询</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        </div>
        <div class="process_foot">
            <button class="btn blue-hoki process5_prev">上一步</button>
            <button class="btn blue-hoki margin-left-20 process5_next">完成</button>
            <button class="btn default margin-left-20 close_layui_page">取消</button>
        </div>
    </div>
</body>

<script type="text/html" id="radioTpl">
    <input type="radio" name="sexRadio" value="{{d.id}}" title=" " lay-filter="radiodemo" {{d.id=="10000"?"checked":""}}>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">插入</a>
</script>

<script type="text/html" id="barDemo2">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/plugins/fuelux/js/spinner.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<script src="../assets/global/plugins/doublebox/js/doublebox-bootstrap.js"></script>


<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../assets/pages/scripts/components-bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>
<script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>

<script>
    //四个步骤页面的切换
    changeStep('process',5);

    $('.close_layui_page').click(function(){
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    });

    //表格的渲染
    layui.use('table', function(){
        var table = layui.table;

        //第一个页面的表格
        table.render({
            elem: '#LAY_table_user'
            ,url: 'layui_table.json'
            ,cols: [[
                {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                ,{field:'id', title: '数据对象', sort: true}
                ,{field:'username', title: '所属数据源'}
                ,{field:'sex', title: '记录条数', sort: true}
                ,{field:'organization', title: '所属机构', sort: true}
            ]]
            ,cellMinWidth: 80
            ,id: 'testReload'
            ,page: true
            ,height: 'full-200'
            ,done :function(){
                console.log('hahha')
            }
        });



        table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

layui.use('table',function(){
    var table2 = layui.table;
    //第三页的表格
    table2.render({
        elem: '#LAY_table_user2'
        ,url: 'test.json'
        ,cols: [[
            {field:'id', title: '输入字段', minWidth:80, sort: true}
            ,{field:'username', title: '输出字段', minWidth:80}
            ,{field:'sex', title: '转换公式', minWidth:80, sort: true}
            ,{ title: '操作', width:178, align:'center', toolbar: '#barDemo'}
        ]]
        ,page: true
        ,height: 'full-200'
        ,done :function(){
            console.log('hahha')
        }
    });
});

    layui.use('table',function(){
        var table = layui.table;
        //第四页的表格
        table.render({
            elem: '#LAY_table_user3'
            ,url: 'layui_table.json'
            ,cols: [[
                {checkbox: true, minWidth:80}
                ,{field:'id', title: '源字段', minWidth:80, sort: true}
                ,{field:'username', title: '目标字段', minWidth:80}
                ,{ title: '操作', width:178, align:'center', toolbar: '#barDemo2'}
            ]]
            ,page: true
            ,height: 'full-240'
            ,done :function(){
                console.log('hahha')
            }
        });
    });




   /* $('.blue-hoki').click(function(){
        if($(this).hasClass('process_one_next')){
            show_hide('one','two')
        }
        else if($(this).hasClass('process_two_next')){
            if($('.skip_three').is(':checked')){
                show_hide('two','four')
            }else{
                show_hide('two','three')
            }
        }
        else if($(this).hasClass('process_three_next')){
            show_hide('three','four')
        }
        else if($(this).hasClass('process_four_next')){
            show_hide('four','five')
        }
        else if($(this).hasClass('process_two_prev')){
            show_hide('two','one')
        }
        else if($(this).hasClass('process_three_prev')){
            show_hide('three','two')
        }
        else if($(this).hasClass('process_four_prev')){
            show_hide('four','three')
        }
        else if($(this).hasClass('process_five_prev')){
            show_hide('five','four')
        }
    });*/


    //第二个步骤页面
    var demo2 = $('.demo').doublebox({
        nonSelectedListLabel: '可选字段列表',
        selectedListLabel: '已选字段列表',
        preserveSelectionOnMove: 'moved',
        moveOnSelect: false,
        nonSelectedList:[{"roleId":"1","roleName":"zhangsan"},{"roleId":"2","roleName":"lisi"},{"roleId":"3","roleName":"wangwu"}],
        selectedList:[{"roleId":"4","roleName":"zhangsan1"},{"roleId":"5","roleName":"lisi1"},{"roleId":"6","roleName":"wangwu1"}],
        optionValue:"roleId",
        optionText:"roleName",
        doubleMove:true,
    });

    $('.select_field').click(function(){
        if ($(this).is(':checked')) {
            $('.data_exchange').css("display","block")
        }else {
            $('.data_exchange').css("display","none")
        }
    });

    //第四个步骤页面
    $('.addToTable').click(function(){
        layer.open({
            type:2,
            content:'表格穿梭框.html',
            area:['850px','550px'],
            title:'添加字段映射',
            shade:0,
            btn:['确认','关闭']
        })
    });

    //第五个步骤页面

    $('.data_help_btn').click(function(){
        $('.data_help').toggleClass('display_none')
    });

    $('.high_set').click(function(){
        $('.high_set_box').toggleClass('display_none')
    });
    $('.select_field_two').click(function(){
        if ($(this).is(':checked')) {
            $('.data_exchange_two').css("display","block")
        }else {
            $('.data_exchange_two').css("display","none")
        }
    });

    $('.radio_four').click(function(){
        if ($('#run_init').is(':checked')) {
            $('.run_init_box').css('visibility','visible');
            $('.complete_init_box').css('visibility','hidden')
        }else{
            $('.run_init_box').css('visibility','hidden');
            $('.complete_init_box').css('visibility','visible')
        }
    });

    $('.toggle_form_show').on('click','div[role="combobox"]',function(){
        console.log($(this).prev('button').attr('title'));
        var message = $(this).prev('button').attr('title');
        if(message == '全量'){
            display_none($('.data_syn_one'))
        }else if(message == '时间戳增量'){
            display_block($('.data_syn_one'))
        }
    });

    function display_none(se) {
        se.length > 1?$.each(se,function(i,v){v.addClass('display_none')}): se.addClass('display_none')
    }
    function display_block(se){
        se.length > 1?$.each(se,function(i,v){v.removeClass('display_none')}): se.removeClass('display_none')
    }

    function changeStep(selector,n){
        for(let i = 1; i <= n; i++){
            (function(){
                $('.blue-hoki').click(function(){
                    if($(this).hasClass(selector+ i+ '_next')){
                     if($(this).hasClass('process2_next')){
                            if($('.skip_three').is(':checked')){
                                $('.'+selector+i).css("display","none");
                                $('.'+selector+(i+2)).css("display","block");
                            }else {
                                $('.'+selector+i).css("display","none");
                                $('.'+selector+(i+1)).css("display","block");
                            }
                        }else {
                         $('.'+selector+i).css("display","none");
                         $('.'+selector+(i+1)).css("display","block");
                     }
                    }else if($(this).hasClass(selector+ i+ '_prev')){
                        $('.'+selector+(i)).css("display","none");
                        $('.'+selector+(i-1)).css("display","block");
                    }
                })
            })(i)
        }
    }
</script>
</html>